<template>
  <div class="box">
    <aside-box>
      <template #zh> 柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";

const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    top: "15px",
    right: "0%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    data: [
      "数据1",
      "数据2",
      "数据3",
      "数据4",
      "数据4",
      "数据5",
      "数据6",
      "数据7",
      "数据8",
      "数据9",
    ],
    axisLine: { show: false },
    axisLabel: {
      color: "rgba(255,255,255,.6)",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
    },
  },
  yAxis: {
    name: "（人）",
    splitNumber: 4,
    nameTextStyle: {
      color: "rgba(255,255,255,.6)",
      fontSize: 12,
    },
    axisLine: { show: false },
    axisLabel: {
      color: "rgba(255,255,255,.6)",
      fontSize: 12,
      fontFamily: "阿里妈妈数黑体 Bold",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)",
        type: "dotted",
      },
    },
    //interval:100,
    //max:500
  },
  series: [
    {
      type: "bar",
      barWidth: "25%",
      itemStyle: {
        normal: {
          barBorderRadius: 50,
          color: function (params) {
            var colorList = [
              "#4591e3",
              "#04b8e5",
              "#04dde5",
              "#04e5bd",
              "#04e57e",
              "#fedb5b",
              "#e59e04",
              "#ff632d",
              "#ff639e",
              "#ff82e9",
              "#b562e4",
            ];

            return colorList[params.dataIndex];
          },

          label: {
            show: true,
            position: "top",
            formatter: "{c}",
            color: "rgba(255,255,255,.4)",
            fontSize: 12,
          },
        },
      },

      data: [725, 605, 364, 345, 325, 261, 231, 215, 121, 100],
    },
  ],
};

const [barRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>